<template>
  <div class="full-calendar-body">
    <div class="weeks">
      <strong class="week" v-for="(week, idx) in weekNames" :key="idx">{{week}}</strong>
    </div>
    <div class="dates" ref="dates">
      <div class="dates-bg">
        <div class="week-row" :key="weekIndex" v-for="(week, weekIndex) in currentDates">
          <div
            class="day-cell"
            :key="weekIndex+'_'+ dayIndex"
            v-for="(day, dayIndex) in week"
            :class="{'today' : day.isToday,
              'not-cur-month' : !day.isCurMonth}"
          >
            <p class="day-number">{{day.monthDay}}</p>
          </div>
        </div>
      </div>

      <!-- absolute so we can make dynamic td -->
      <!-- {{events}} -->
      <!-- <div v-for="(week, weekIndex) in currentDates" :key="weekIndex" class="works">
        <p>{{week}}</p>
      </div> -->
    </div>
  </div>
</template>
<script type="text/babel">
import dateFunc from './dateFunc'

export default {
  props: {
    currentDate: {},
    events: {},
    weekNames: {
      type: Array,
      default: () => []
    },
    monthNames: {},
    firstDay: {}
  },
  created () {},
  data () {
    return {
      // weekNames : DAY_NAMES,
      weekMask: [1, 2, 3, 4, 5, 6, 7],
      // events : [],
      isLismit: true,
      eventLimit: 3,
      showMore: false,
      morePos: {
        top: 0,
        left: 0
      },
      selectDay: {}
    }
  },
  watch: {
    weekNames (val) {
      console.log('watch weekNames', val)
    }
  },
  computed: {
    currentDates () {
      return this.getCalendar()
    }
  },
  methods: {
    isBegin (event, date, index) {
      const st = new Date(event.start)

      if (index === 0 || st.toDateString() === date.toDateString()) {
        return event.title
      }
      return '　'
    },
    moreTitle (date) {
      const dt = new Date(date)
      return (
        this.weekNames[dt.getDay()] +
        ', ' +
        this.monthNames[dt.getMonth()] +
        dt.getDate()
      )
    },
    classNames (cssClass) {
      if (!cssClass) return ''
      // string
      if (typeof cssClass === 'string') return cssClass

      // Array
      if (Array.isArray(cssClass)) return cssClass.join(' ')

      // else
      return ''
    },
    getCalendar () {
      // calculate 2d-array of each month
      // first day of this month
      const now = new Date() // today
      const current = new Date(this.currentDate)

      const startDate = dateFunc.getStartDate(current) // 1st day of this month

      const curWeekDay = startDate.getDay()

      // begin date of this table may be some day of last month
      let diff = parseInt(this.firstDay) - curWeekDay
      diff = diff > 0 ? diff - 7 : diff

      startDate.setDate(startDate.getDate() + diff)
      const calendar = []

      for (let perWeek = 0; perWeek < 6; perWeek++) {
        const week = []
        for (let perDay = 0; perDay < 7; perDay++) {
          week.push({
            monthDay: startDate.getDate(),
            isToday: now.toDateString() === startDate.toDateString(),
            isCurMonth: startDate.getMonth() === current.getMonth(),
            weekDay: perDay,
            date: new Date(startDate)
          })
          startDate.setDate(startDate.getDate() + 1)
        }
        calendar.push(week)
      }
      return calendar
    },
    isStart (eventDate, date) {
      const st = new Date(eventDate)
      return st.toDateString() === date.toDateString()
    },
    isEnd (eventDate, date) {
      const ed = new Date(eventDate)
      return ed.toDateString() === date.toDateString()
    },
    selectThisDay (day, jsEvent) {
      this.selectDay = day
      this.showMore = true
      this.morePos = this.computePos(event.target)
      this.morePos.top -= 100
      const events = day.events.filter((item) => {
        return item.isShow === true
      })
      this.$emit('moreclick', day.date, events, jsEvent)
    },
    computePos (target) {
      const eventRect = target.getBoundingClientRect()
      const pageRect = this.$refs.dates.getBoundingClientRect()
      return {
        left: eventRect.left - pageRect.left,
        top: eventRect.top + eventRect.height - pageRect.top
      }
    },
    dayClick (day, jsEvent) {
      this.$emit('dayclick', day, jsEvent)
    },
    eventClick (event, jsEvent) {
      if (!event.isShow) {
        return
      }
      jsEvent.stopPropagation()
      const pos = this.computePos(jsEvent.target)
      this.$emit('eventclick', event, jsEvent, pos)
    }
  }
}
</script>
<style lang="scss" scoped>
$header-height: 40px;
.full-calendar-body {
  margin: 20px;
  display: grid;
  grid-auto-rows: $header-height calc(100% - $header-height);
  border: 1px solid #f3f3f3;
  .weeks {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid #f3f3f3;
    > .week {
      height: 100%;
      line-height: $header-height;
      &:not(:last-child) {
        border-right: 1px solid #f3f3f3;
      }
    }
  }
  .dates {
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    .works {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    &:not(:last-child) {
      border-bottom: 1px solid #f3f3f3;
    }
  }
  }
}
</style>
